import React, {ReactNode} from 'react';
import {Component} from 'react';
import {connect} from 'umi';
import {
  Button,
  Checkbox,
  Collapse, Divider,
  Form,
  Input, message,
  Modal, Popconfirm,
  Select,
  Space,
} from 'antd';
import SearchAbleSelect from '@/components/SearchAbleSelect';
import APIS from '@/apis';
import {FormInstance} from 'antd/lib/form';
import TextArea from 'antd/lib/input/TextArea';
import MdDocShow from "@/components/MdDocShow";
import {newGuid} from "@/utils/utils";

interface IDeleteConfirm {
  onOk?: any;
  onCancel?: any;
  children: ReactNode;
}

class PaperEditor extends Component<any, any> {
  formInstance?: FormInstance | null;

  constructor(props: any) {
    super(props);
    this.state = {
      editorData: null,
      teacher: 0,
      type: 0,
      tags: [],
      courseId: 0,
      detail: {zones: [{id: 0}]},
      zone1Questions: [],
      zone2Questions: [],
      zone3Questions: [],
      zone4Questions: [],
      allteachers: [],
      questionPickerVisible: false,
      questionList: [],
      total: 1,

      questionVisible: false,
      currentQuestionData: {
        id: null,
        type: null,
        courseId: null,
        content: null,
        answer: null,
        analyzing: null,
        selections: null,
      },
      currentSelections: [],
      willAddSelection: '',
      zoneIndex: 0,

      selectCourseType: true,
      teacherName: '',
      questionDetails: null,
      questionId: 0,
      value: '',
    };
  }

  componentDidMount() {
    var params = new URLSearchParams(this.props.history.location.search);
    var id = null;
    if (params.has('id')) {
      id = parseInt(params.get('id') + '');
      //console.log("课程id", id);
      this.setState({courseId: id})
      setTimeout(() => {
        this.search?.onSearch('');
      }, 1000);
      this.getExamDetail({id});
    }
  }

  getExamDetail(data: any) {
    APIS.ExamAPI.GetExamDetail(data).then((detail) => {
      this.setState({
        ...detail, tags: detail.tagInfos.map((item: any) => {
          return item.id;
        })
      });
      this.setState({editorData: detail, courseId: detail.courseId, selectCourseType: false});
      this.formInstance?.setFieldsValue(detail);
      this.formInstance?.setFieldsValue({"course": detail.courseId})
      setTimeout(() => {
        this.search?.onSearch('');
      }, 100);
      detail.zones.forEach((item: any, index: number) => {
        APIS.ExamAPI.GetPaperQuestionList(item).then((res) => {
          var temp = {...this.state};
          temp[`zone${index + 1}Questions`] = res;
          this.setState(temp);
        });
      });
      APIS.CourseAPI.GetAllCourseMember({courseId: detail.courseId}).then((data) => {
        this.setState({allteachers: data})
      }).catch(e => {
        console.error(e)
      })
    });
  }

  getQuestionList() {

    this.setState({questionPickerVisible: true});
    setTimeout(() => {
      this.searchAdd?.onSearch('');
    }, 1000);
    // setTimeout(() => {
    //   APIS.ExamAPI.SearchGetQuetionList({key:'',id:this.state.courseId,type:this.state.zoneIndex}).then(
    //     (res) => {
    //       this.setState({ questionPickerVisible: true, questionList: res.data, total: res.total });
    //       console.log(this.state.zoneIndex+"     "+this.state.questionList);
    //     },
    //   );
    // }, 50);

  }

  search: SearchAbleSelect | undefined;
  searchAdd: SearchAbleSelect | undefined;

  renderQuestion(item: any) {
    if (item === null) {
      return <div></div>
    } else {
      return <div>
        <span>问题：{item.content}</span>
        <div>{item.selections.map((value: any, index: any) => {
          return <li key={index}>{Options[index]}：{value}</li>
        })}</div>
        <div>正确答案：{item.type === 1 ? Options[item.answer] : item.answer} </div>
        <div>解析：{item.analyzing}</div>
      </div>
    }
  }

  DeleteConfirm = (props: IDeleteConfirm) => {
    return <Popconfirm title={"确定删除该信息?"} onConfirm={props.onOk} onCancel={props.onCancel}>
      {
        props.children
      }
    </Popconfirm>
  }

  render() {
    const DeleteConfirm = this.DeleteConfirm;
    return (
      <div>
        <Form
          ref={(ref) => {
            this.formInstance = ref;
          }}
          style={{marginTop: '20px'}}
          initialValues={{
            title: this.state.editorData?.title,
            description: this.state.editorData?.description,
          }}
          onFinish={(values) => {
            if (this.state.editorData) {
              APIS.ExamAPI.UpdateExam({
                id: this.state.editorData.id,
                title: values.title,
                teacher: this.state.teacher,
                courseId: this.state.courseId,
                type: this.state.type,
                tags: this.state.tags,
                description: values.description,
              }).then((res) => alert(res.msg));
            } else {
              APIS.ExamAPI.CreateNewExam({
                title: values.title,
                teacher: this.state.teacher,
                courseId: this.state.courseId,
                type: this.state.type,
                tags: this.state.tags,
                description: values.description,
              }).then((res) => {
                this.getExamDetail(res.data);
                this.setState({editorData: res.data});
                alert(res.msg);
              });
            }
          }}
        >
          <Form.Item
            label="试卷标题"
            name="title"
            rules={[{required: true, message: '请输入试卷标题'}]}
          >
            <Input placeholder="请输入试卷标题"/>
          </Form.Item>

          <Form.Item name="course" label="所属课程" hasFeedback rules={[{required: true, message: '请输入所属课程'}]}>
            <SearchAbleSelect
              searchData={async (key) => {
                var datas: Array<any> = await APIS.CourseAPI.SearchGetCourseList(key);
                //console.log(datas);
                return Promise.resolve(
                  datas.map((item) => {
                    return {value: item.id, key: item.courseName};
                  }),
                );
              }}
              name="course"
              placeholder="请选择所属课程"
              values={this.state.courseId}
              getValue={(value) => {
                this.setState({courseId: value.course, selectCourseType: false});
                this.formInstance?.setFieldsValue({"course": value.course})
                setTimeout(() => {
                  this.search?.onSearch('');
                }, 100);
              }}
            />
          </Form.Item>
          <Form.Item name="teacher" label="选题老师" hasFeedback rules={[{required: true, message: '请选择选题老师'}]}>
            <SearchAbleSelect
              ref={(ref: any) => this.search = ref}
              disabled={this.state.editorData === null ? this.state.selectCourseType : false}
              searchData={
                async (key) => {
                  var datas: any = await APIS.CourseAPI.GetCourseMemberList({
                    current: 1,
                    pageSize: 9999,
                    courseId: this.state.courseId
                  });
                  //console.log(datas);
                  if (datas) {
                    return Promise.resolve(
                      datas?.data?.map((item: any) => {
                        return {value: item.id, key: item.name};
                      }),
                    );
                  } else
                    return Promise.reject("error")

                }
              }
              name="teacher"
              placeholder="请选择选题老师"
              values={this.state.teacher}
              getValue={(value) => {
                this.setState({teacher: value.teacher});
                //console.log(value);
                this.formInstance?.setFieldsValue({"teacher": value.teacher})
              }}

            >

            </SearchAbleSelect>


          </Form.Item>


          <Form.Item name="type" label="试卷类型" hasFeedback rules={[{required: true, message: '请选择试卷类型'}]}>
            <SearchAbleSelect
              searchData={async (key) => {

                var datas: Array<any> = await APIS.ExamAPI.SearchGetTypeList(key);
                return Promise.resolve(
                  datas?.map((item) => {
                    return {value: item.id, key: item.typeName};
                  }),
                );
              }}
              name="type"
              placeholder="请选择一个类型"
              getValue={(value) => {
                this.setState({type: value.type});
                this.formInstance?.setFieldsValue({"type": value.type})
              }}
              values={this.state.type}
            ></SearchAbleSelect>
          </Form.Item>

          <Form.Item
            name="tag"
            label="试卷标签"
            hasFeedback
            rules={[{required: false, message: '请选择试卷标签'}]}
          >
            <SearchAbleSelect
              searchData={async (key) => {
                var datas: Array<any> = await APIS.ExamAPI.SearchGetTagList(key);
                return Promise.resolve(
                  datas?.map((item) => {
                    return {value: item.id, key: item.tag};
                  }),
                );
              }}
              name="tag"
              values={this.state.tags}
              maxCount={3}
              placeholder="请选择标签（最多3个）"
              isMultiple={true}
              getValue={(value) => {
                console.log(value.tag);
                this.setState({tags: value.tag})
              }}

            ></SearchAbleSelect>
          </Form.Item>

          <Form.Item
            name="description"
            label="试卷描述"
            hasFeedback
            rules={[{required: true, message: '请输入试卷描述'}]}
          >
            <TextArea></TextArea>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button onClick={() => this.props.history.goBack()}>取消</Button>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
            </Space>
          </Form.Item>
        </Form>
        {this.state.editorData && (
          <Collapse>
            <Collapse.Panel key={0} header="选择题">
              <Space style={{display: "flex", justifyContent: "flex-end"}}>
                {/* <Button
                  type="primary"
                  onClick={() => {
                    this.setState({ zoneIndex: 0, questionVisible: true });
                  }}
                >
                  创建试题
                </Button> */}
                <Button
                  type="primary"
                  style={{borderRadius: 15, marginBottom: 20}}
                  onClick={() => {
                    this.setState({zoneIndex: 1});
                    //this.setState({ questionPickerVisible: true});
                    // this.getQuestionList(1, 10, Const.QUESTION_TYPE.Multiple_Choice, this.state.courseId);
                    this.getQuestionList();
                  }}
                >
                  添加试题
                </Button>
              </Space>
              {this.state.zone1Questions.map?.((v: any, i: number) => (
                <div key={i} style={{border: ' 1px solid #eeeeee', padding: "27px 22px 28px 38px"}}>
                  <Space style={{float: 'right'}}>
                    <a
                      onClick={() => {
                        this.setState({
                          zoneIndex: 0,
                          questionVisible: true,
                          currentQuestionData: v,
                          currentSelections: v.selections,
                        });
                      }}
                    >
                      编辑
                    </a>
                    <Divider type={"vertical"}/>
                    <DeleteConfirm onOk={() => {
                      APIS.ExamAPI.DeletePaperQuestion({id: v.pqId}).then((resp) => {
                        if (resp.code === 10000) {
                          message.success("删除成功")
                        } else {
                          message.error("删除失败")
                        }
                        this.getExamDetail(this.state.editorData);
                      }).catch(e => console.error(e));
                    }}>
                      <a
                        style={{color: 'red'}}
                      >
                        删除
                      </a>
                    </DeleteConfirm>
                  </Space>
                  <div style={{display: "flex"}}>
                    <span>{i + 1 + '. '}</span>
                    <MdDocShow id={`question-select-${v.id}`} value={v.content}/>
                  </div>
                  {v.selections?.map((v: any, i: number) => (
                    <div key={i} style={{display: "flex"}}><span> {String.fromCharCode(65 + i) + '. '}</span><MdDocShow
                      id={newGuid()}
                      style={{width: "98%"}}
                      value={v}/></div>
                  ))}
                  <div>
                    答案：
                    {v.answer.split(',')?.map((v: any, i: number) => (
                      <div key={i} style={{display: 'inline-block'}}>
                        {String.fromCharCode(65 + parseInt(v))}
                      </div>
                    ))}
                  </div>
                  <div>解析：{v.analyzing}</div>
                </div>
              ))}
            </Collapse.Panel>
            <Collapse.Panel key={1} header="判断题">
              <Space style={{display: "flex", justifyContent: "flex-end"}}>
                {/* <Button
                  type="primary"
                  onClick={() => {
                    this.setState({ zoneIndex: 1 });
                    this.getQuestionList(1, 10, Const.QUESTION_TYPE.True_Or_False, this.state.courseId);
                  }}
                >
                  创建试题
                </Button> */}
                <Button
                  type="primary"
                  style={{borderRadius: 15, marginBottom: 20}}
                  onClick={() => {
                    this.setState({zoneIndex: 2, questionPickerVisible: true});
                    this.getQuestionList();
                  }}
                >
                  添加试题
                </Button>
              </Space>
              {this.state.zone2Questions.map?.((v: any, i: number) => (
                <div key={i} style={{border: ' 1px solid #eeeeee', padding: "27px 22px 28px 38px"}}>
                  <Space style={{float: 'right'}}>
                    <a
                      onClick={() => {
                        this.setState({
                          zoneIndex: 1,
                          questionVisible: true,
                          currentQuestionData: v,
                          currentSelections: v.selections,
                        });
                      }}
                    >
                      编辑
                    </a>
                    <Divider type={"vertical"}/>
                    <DeleteConfirm onOk={() => {
                      APIS.ExamAPI.DeletePaperQuestion({id: v.pqId}).then((resp) => {
                        if (resp.code === 10000) {
                          message.success("删除成功")
                        } else {
                          message.error("删除失败")
                        }
                        this.getExamDetail(this.state.editorData);
                      });
                    }}>
                      <a
                        style={{color: 'red'}}
                      >
                        删除
                      </a>
                    </DeleteConfirm>
                  </Space>
                  <div style={{display: "flex"}}>
                    <span>{i + 1 + '. '}</span>
                    <MdDocShow id={`question-judement-${v.id}`} value={v.content}/>
                  </div>
                  <div>答案：{v.answer === '1' ? '正确' : '错误'}</div>
                  <div>解析：{v.analyzing}</div>
                </div>
              ))}
            </Collapse.Panel>
            <Collapse.Panel key={2} header="填空题">
              <Space style={{display: "flex", justifyContent: "flex-end"}}>
                {/* <Button
                  type="primary"
                  onClick={() => {
                    this.setState({ zoneIndex: 2 });
                    this.getQuestionList(1, 10, Const.QUESTION_TYPE.Fill_The_Blank, this.state.courseId);
                  }}
                >
                  创建试题
                </Button> */}
                <Button
                  type="primary"
                  style={{borderRadius: 15, marginBottom: 20}}
                  onClick={() => {
                    this.setState({zoneIndex: 3, questionPickerVisible: true});
                    this.getQuestionList();
                  }}
                >
                  添加试题
                </Button>
              </Space>
              {this.state.zone3Questions.map?.((v: any, i: number) => (
                <div key={i} style={{border: ' 1px solid #eeeeee', padding: "27px 22px 28px 38px"}}>
                  <Space style={{float: 'right'}}>
                    <a
                      onClick={() => {
                        this.setState({
                          zoneIndex: 2,
                          questionVisible: true,
                          currentQuestionData: v,
                          currentSelections: v.selections,
                        });
                      }}
                    >
                      编辑
                    </a>
                    <Divider type={"vertical"}/>
                    <DeleteConfirm onOk={() => {
                      APIS.ExamAPI.DeletePaperQuestion({id: v.pqId}).then((resp) => {
                        if (resp.code === 10000) {
                          message.success("删除成功")
                        } else {
                          message.error("删除失败")
                        }
                        this.getExamDetail(this.state.editorData);
                      });
                    }}>
                      <a
                        style={{color: 'red'}}
                      >
                        删除
                      </a>
                    </DeleteConfirm>

                  </Space>
                  <div style={{display: "flex"}}>
                    <span>{i + 1 + '. '}</span>
                    <MdDocShow id={`question-fill-${v.id}`} value={v.content}/>
                  </div>
                  <div>答案：{v.answer}</div>
                  <div>解析：{v.analyzing}</div>
                </div>
              ))}
            </Collapse.Panel>
            <Collapse.Panel key={3} header="简答题">
              <Space style={{display: "flex", justifyContent: "flex-end"}}>
                {/* <Button
                  type="primary"
                  onClick={() => {
                    this.setState({ zoneIndex: 3 });
                    this.getQuestionList(1, 10, Const.QUESTION_TYPE.Short_Answer_Questions, this.state.courseId);
                  }}
                >
                  创建试题
                </Button> */}
                <Button
                  type="primary"
                  style={{borderRadius: 15, marginBottom: 20}}
                  onClick={() => {
                    this.setState({zoneIndex: 4, questionPickerVisible: true});
                    this.getQuestionList();
                  }}
                >
                  添加试题
                </Button>
              </Space>
              {this.state.zone4Questions.map?.((v: any, i: number) => (
                <div key={i} style={{border: ' 1px solid #eeeeee', padding: "27px 22px 28px 38px"}}>
                  <Space style={{float: 'right'}}>
                    <a
                      onClick={() => {
                        this.setState({
                          zoneIndex: 3,
                          questionVisible: true,
                          currentQuestionData: v,
                          currentSelections: v.selections,
                        });
                      }}
                    >
                      编辑
                    </a>
                    <Divider type={"vertical"}/>
                    <DeleteConfirm onOk={() => {
                      APIS.ExamAPI.DeletePaperQuestion({id: v.pqId}).then((resp) => {
                        if (resp.code === 10000) {
                          message.success("删除成功")
                        } else {
                          message.error("删除失败")
                        }
                        this.getExamDetail(this.state.editorData);
                      });
                    }}>
                      <a
                        style={{color: 'red'}}
                      >
                        删除
                      </a>
                    </DeleteConfirm>

                  </Space>
                  <div style={{display: "flex"}}>
                    <span>{i + 1 + '. '}</span>
                    <MdDocShow id={`question-answer-${v.id}`} value={v.content}/>
                  </div>
                  <div>答案：{v.answer}</div>
                  <div>解析：{v.analyzing}</div>
                </div>
              ))}
            </Collapse.Panel>
          </Collapse>
        )}
        <Modal
          title="添加试题"
          visible={this.state.questionPickerVisible}
          onCancel={() => this.setState({questionPickerVisible: false})}
          footer={
            // <Pagination
            //   simple
            //   total={this.state.total}
            //   pageSize={10}
            //   onChange={this.getQuestionList.bind(this)}
            // />
            <div>
              <Button
                type="primary"
                onClick={
                  () => {
                    APIS.ExamAPI.CreateNewPaperQuestion({
                      //id:this.state.editorData.id,
                      questionId: this.state.questionId,
                      zoneId: this.state.editorData.zones[this.state.zoneIndex - 1].id,
                    }).then((res) => {
                      this.setState({questionVisible: false});
                      this.getExamDetail(this.state.editorData);
                      this.setState({questionDetails: null, questionPickerVisible: false, value: ""})
                      //this.searchAdd?.onSearch('');
                      if (res.code === 10000) {
                        message.success("添加成功")
                      } else if (res.code === 30021) {
                        message.error("添加失败，试题已存在")
                      } else {
                        message.error("添加失败")
                      }
                    }).catch((error) => {
                      console.log("添加失败了" + error)
                    });
                  }
                }
              >
                添加
              </Button>
              <Button
                onClick={
                  () => {
                    this.setState({questionDetails: null, value: "", questionPickerVisible: false})
                    //                                                                                    this.searchAdd?.onSearch('');
                    // this.setState({value:null})
                  }
                }
              >
                取消
              </Button>
            </div>
          }
        >
          <SearchAbleSelect
            style={{width: '450px'}}
            ref={(ref: any) => this.searchAdd = ref}
            values={this.state.value}
            searchData={async (key) => {
              var datas: Array<any> = await APIS.ExamAPI.SearchGetQuetionList({
                key: key,
                id: this.state.courseId,
                type: this.state.zoneIndex
              });

              return Promise.resolve(
                datas.map((item) => {
                  return {value: item.id, key: item.content};
                }),
              );
            }}
            name="id"

            getValue={(v) => {
              APIS.ExamAPI.GetQuestionDetail({id: v.id}).then((res: any) => {
                this.setState({questionDetails: res, value: res.content})

              })
              this.setState({questionId: v.id})
              // APIS.ExamAPI.CreateNewPaperQuestion({
              //   questionId: v.id,
              //   zoneId: this.state.editorData.zones[this.state.zoneIndex].id,
              // }).then((res) => {
              //   this.setState({ questionVisible: false });
              //   this.getExamDetail(this.state.editorData);
              //   console.log(res);
              // });

            }}

          />
          {/* {this.state.questionPickerVisible && (
            <List>
              {this.state.questionList.map((v: any, i: number) => (
                <List.Item key={i}>
                  <div>{i + 1 + '. ' + v.content}</div>
                  <a
                    onClick={() => {
                      APIS.ExamAPI.CreateNewPaperQuestion({
                        questionId: v.id,
                        zoneId: this.state.editorData.zones[this.state.zoneIndex].id,
                      }).then(() => {
                        this.setState({ questionVisible: false });
                        this.getExamDetail(this.state.editorData);
                      });
                    }}
                  >
                    添加
                  </a>
                </List.Item>
              ))}
            </List>
          )} */}
          {this.renderQuestion(this.state.questionDetails)}
        </Modal>

        <Modal
          title="编辑试题"
          visible={this.state.questionVisible}
          onCancel={() => this.setState({questionVisible: false})}
          footer={<div></div>}
        >
          {this.state.questionVisible && (
            <Form
              ref={(ref: any) => (this.formInstance = ref)}
              initialValues={{
                type: this.state.currentQuestionData?.type,
                courseId: this.state.currentQuestionData?.courseId,
                content: this.state.currentQuestionData?.content,
                answer: this.state.currentQuestionData?.answer,
                analyzing: this.state.currentQuestionData?.analyzing,
              }}
              onFinish={(values) => {
                //将答案数组排序并处理为以逗号隔开的数字字符串
                var answerStr = '';
                values.answer?.sort?.().map((v: number) => {
                  answerStr += v.toString() + ',';
                });
                answerStr = answerStr.slice(0, answerStr.length - 1);
                //更新
                if (this.state.currentQuestionData.id)
                  APIS.ExamAPI.UpdateQuestion({
                    id: this.state.currentQuestionData.id,
                    type: this.state.zoneIndex + 1,
                    courseId: this.state.courseId,
                    content: values.content,
                    selections: this.state.currentSelections,
                    answer: answerStr === '' ? values.answer : answerStr,
                    analyzing: values.analyzing,
                  }).then(() => {
                    this.setState({questionVisible: false});
                    this.getExamDetail(this.state.editorData);
                  });
                //新增
                else
                  APIS.ExamAPI.CreateNewQuestion({
                    type: this.state.zoneIndex + 1,
                    courseId: this.state.courseId,
                    content: values.content,
                    selections: this.state.currentSelections,
                    answer: answerStr === '' ? values.answer : answerStr,
                    analyzing: values.analyzing,
                  }).then((res) => {
                    APIS.ExamAPI.CreateNewPaperQuestion({
                      questionId: res.data.id,
                      zoneId: this.state.editorData.zones[this.state.zoneIndex].id,
                    }).then(() => {
                      this.setState({questionVisible: false});
                      this.getExamDetail(this.state.editorData);
                    });
                  });
              }}
            >
              <Form.Item name="content" label="试题题目">
                <TextArea/>
              </Form.Item>

              {this.state.zoneIndex === 0 ? (
                <>
                  <Form.Item label="选项">
                    {this.state.currentSelections?.map((v: any, i: number) => (
                      <div key={i} style={{marginLeft: '30px'}}>
                        {String.fromCharCode(65 + i) + '. ' + v}
                        <a
                          style={{float: 'right', marginRight: '70px'}}
                          onClick={() => {
                            if (this.state.currentSelections.length > 1) {
                              this.state.currentSelections.splice(i, 1);
                              this.setState({});
                            } else alert('至少有一个选项');
                          }}
                        >
                          删除
                        </a>
                      </div>
                    ))}
                  </Form.Item>

                  <Form.Item label="新增选项">
                    <Input
                      style={{width: '300px', marginRight: '10px'}}
                      onChange={(e) => this.setState({willAddSelection: e.target.value})}
                    />
                    <Button
                      type="primary"
                      onClick={() => {
                        this.setState({
                          currentSelections: [
                            ...this.state.currentSelections,
                            this.state.willAddSelection,
                          ],
                        });
                      }}
                    >
                      +
                    </Button>
                  </Form.Item>

                  <Form.Item name="answer" label="正确答案">
                    <Checkbox.Group>
                      {this.state.currentSelections?.map((v: any, i: number) => (
                        <Checkbox key={i} value={i}>
                          {String.fromCharCode(65 + i)}
                        </Checkbox>
                      ))}
                    </Checkbox.Group>
                  </Form.Item>
                </>
              ) : this.state.zoneIndex === 1 ? (
                <Form.Item name="answer" label="正确答案">
                  <Select>
                    <Select.Option key={0} value={'1'}>
                      正确
                    </Select.Option>
                    <Select.Option key={1} value={'0'}>
                      错误
                    </Select.Option>
                  </Select>
                </Form.Item>
              ) : (
                <Form.Item name="answer" label="正确答案">
                  <Input/>
                </Form.Item>
              )}

              <Form.Item name="analyzing" label="试题解析">
                <TextArea/>
              </Form.Item>

              <Form.Item style={{float: 'right'}}>
                <Space>
                  <Button type="default" onClick={() => this.setState({questionVisible: false})}>
                    取消
                  </Button>
                  <Button type="primary" htmlType="submit">
                    确定
                  </Button>
                </Space>
              </Form.Item>
            </Form>
          )}
        </Modal>
      </div>
    );
  }
}

enum Options {
  A = 0,
  B,
  C,
  D,
  E,
  F,
  G,
  H,
  I,
  J,
  K,
  L,
  M,
  N,
  O,
  P,
  Q,
  R,
  S,
  T,
  U,
  V,
  W,
  X,
  Y,
  Z
}

export default connect()(PaperEditor);
